@extends('backend.layouts.app')
@section('sa-op', 'menu-open')
@section('sa-ac', 'active')
@section('title', '业务员管理')
@section('content')
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">业务员管理</h3>
               <a href="{{route('admin.salesmans.create')}}" class="float-right mt-3 btn btn-primary text-white"><i class="fa fa-plus"></i> 新增业务员</a>
            </div> 
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>编号</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>当前卡数</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {{--  数据列表开始  --}}
                @forelse($salesmans as $salesman)
                <tr>
                  <td>{{ $salesman->id }}</td>
                  <td>
                    {{ $salesman->name }}
                  </td>
                  <td>
                    <span class="badge  badge-success  "> {{ $salesman->email }}</span>
                  </td>
                  <td>
                    <span class="badge badge-dark">{{ $salesman->cards->count() }}</span>
                  </td>
                  <td class="w-25"> 
                    <a href="{{route('admin.salesmans.edit', $salesman->id)}}" class="btn btn-info"><i class="fa fa-edit"></i> 编辑</a>
                    <a href="javascript:;" class="btn btn-danger"  
                      onclick="event.preventDefault(); var r=confirm('确认删除 {{$salesman->id}} ? ')
                                                     r==true ? document.getElementById('del-form{{$salesman->id}}').submit(): console.info('cansle');"><i class="fa fa-remove"></i>删除 </a>
                     <form id="del-form{{$salesman->id}}" action="{{ route('admin.salesmans.destroy', $salesman->id) }}" method="POST" style="display: none;">
                             @csrf
                             @method('DELETE')
                      </form>
                  </td>
                </tr>
                @empty
                  <td>暂无数据</td>
                @endforelse
               {{-- //数据列表结束 --}}
                </tbody>
                <tfoot>
                <tr>
                  <th>编号</th>
                  <th>卡号</th>
                  <th>金额</th>
                  <th>操作</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
@endsection

@section('script')
    <!-- DataTables -->
      <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('asset/plugins/datatables/dataTables.bootstrap4.css')}}">
    <script src="{{ asset('asset/plugins/datatables/jquery.dataTables.js')}}"></script>
    <script src="{{ asset('asset/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
    <!-- page script -->
    <script>
    $(function () {
        $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
         language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
        });
    });
    </script>
@endsection